<template>
	<view class="main">
		<!-- 顶部栏 -->
		<MyHead2 :title="title"></MyHead2>
		
		<view class="container">
			<view class="user-actions" @click="logout">
				<text class="action-link">切换用户</text>
				<view class="arrow">
					<image src="https://gd-hbimg.huaban.com/ad5edebf6a3780388703295edf222bad920054c6f84-q64pd9_fw480webp" mode="scaleToFill"></image>
				</view>
			</view>
			
			<view class="info">
				<view class="avatar">
					<image :src="currentUser.avatarUrl" mode="" @click="goToLogin1"></image>
				</view>
				<view class="BigTitle" v-if="!hasCurrentUser">{{currentUser.userName}}</view>
				<view class="BigTitle" v-if="hasCurrentUser">{{currentUser.userName}}的知识库</view>
			</view>
			
			<view class="cardsBox">
				<view class="cardTitle"  v-if="hasCurrentUser">{{ swiper.list[swiper.index].title }}</view>
				<swiper circular :previous-margin="swiper.margin" :next-margin='swiper.margin' class="cardsSwiper" @change="switchCard"  v-if="hasCurrentUser">
					<swiper-item class="swiperItem" v-for="(card,index) in swiper.list" :key="index">
						<!-- 切记，修改swiper-item里面的盒子样式，因为swiper-item的样式这辈子也改不到你要的效果，除非投胎再等一个世纪 -->
						<view :class="{ card:index!==swiper.index, card_active:index===swiper.index }">
							<scroll-view class="AIChat_Record_Line1" scroll-x="true">
								<view class="chatBox" v-for="item in card.firstList" :key="item.historyId" @click="goToHistory(item)">
									<view class="title">{{ item.historyTime }}</view>
										<view>上次讲到</view>
										<view class="inner">我:&nbsp;&nbsp;{{ item.historyTitle }}</view>
								</view>
							</scroll-view>
							<scroll-view class="AIChat_Record_Line2" scroll-x="true">
								<view class="chatBox" v-for="item in card.secondList" :key="item.historyId" @click="goToHistory(item)">
									<view class="title">{{ item.historyTime }}</view>
										<view>上次讲到</view>
										<view class="inner">我:&nbsp;&nbsp;{{ item.historyTitle }}</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
				
				
				<view v-if="!hasCurrentUser" class="initBox">
					<view class="initImage">
						<image src="https://gd-hbimg.huaban.com/3f7c8a196579c03c0092682752388cc65c03156ff14b-cHTXE2_fw480webp" mode=""></image>
					</view>
					
					<view class="initText">当前还未登录，登陆后享用更多服务</view>
					<view class="initText" style="margin-top: 10rpx;">点击【头像】或【下方按钮】登录</view>
				</view>
			</view>
			
			
			<view :class="{OpenAiChat: 'true', OpenAiChat_clicked: clicked}" @click="goToLogin2" v-if="!hasCurrentUser">
				登录
			</view>
			<view class="button" @click="go" v-if="hasCurrentUser">
				分享
				<image src="https://gd-hbimg.huaban.com/6dca4056132befc9984518217c1ee695436e87fe2789-rrTrDn_fw480webp" mode=""></image>
			</view>
		</view>
		
		<!-- 自定义底部tabar -->
		<MyTabar :currentPath="pathUrl"></MyTabar>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				title: '我的',
				pathUrl: '/pages/my/my',
				
				currentUser: {
					uuid: '',
					avatarUrl: 'https://gd-hbimg.huaban.com/010231a46192438576a025cc43faf1c484517d6f9112-Xu8UrF_fw480webp', // 替换为默认头像路径
					userName: '未登录用户',
				},
				hasCurrentUser: false,
				clicked: false,
				
				AllAiChatLists: [],//所有跟ai的聊天记录
				ComputerNetworkList: [], //计算机网络大分类的聊天记录
				OperatingSystemList: [], //操作系统大分类的聊天记录
				DataStructureList: [], //数据结构大分类的聊天记录
				ComputerPrincipleList: [], //计算机组成原理大分类的聊天记录
				LatlyList: [], //最近的聊天记录
				
				swiper: {
					margin: "120rpx",
					index: 0,
					list: [
						{
							title: '最近的聊天记录',
							firstList: [],
							secondList: []
						},
						{
							title: '计算机组成原理',
							firstList: [],
							secondList: []
						}, 
						{
							title: '数据结构',
							firstList: [],
							secondList: []
						}, 
						{
							title: '计算机网络',
							firstList: [],
							secondList: []
						},
						{
							title: '操作系统',
							firstList: [],
							secondList: []
						}
					]
				}
			}
		},
		onShow() {
			let currentUser = uni.getStorageSync('currentUser');
			
			if (currentUser) {
				console.log(currentUser)
				this.currentUser = currentUser
				this.hasCurrentUser = true
				
				//获取所有聊天记录
				this.LatlyList = this.$store.state.LatlyList
				this.AiHistoryList = this.$store.state.AllAiChatLists
				this.ComputerNetworkList = this.$store.state.ComputerNetworkList
				this.OperatingSystemList = this.$store.state.OperatingSystemList
				this.DataStructureList = this.$store.state.DataStructureList
				this.ComputerPrincipleList = this.$store.state.ComputerPrincipleList
				
				//把每个分类的聊天记录还得分成上下两列
				this.filterAllAiChatLists()
			} else {
				this.hasCurrentUser = false
			}
		},
		onLoad() {
			let currentUser = uni.getStorageSync('currentUser');
			
			if (!currentUser) {
				this.hasCurrentUser = false
				
				// 如果 currentUser 不存在，提示先登录
				uni.showModal({
					title: '当前未登录',
					content: '请先登录/注册',
					confirmText: '确认登录',
					conselText: '取消授权',
					success: (res) => {
						if(res.confirm){
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: "取消授权个人信息"
							});
						}
					},
					fail: (err) => {
						// 模态对话框调用失败
						console.log("模态对话框调用失败：", err);
					}
				});
			} else {
				console.log(currentUser)
				this.hasCurrentUser = true
				this.currentUser = currentUser
			}
		},
		methods: {
			filterAllAiChatLists(){
				//暂时定上面一列放4条，下面放3条
				if(this.LatlyList.length > 4){
					let length = this.LatlyList.length
					this.swiper.list[0].firstList = this.LatlyList.slice(0,3)
					this.swiper.list[0].secondList = this.LatlyList.slice(3,length)
				} else {
					this.swiper.list[0].firstList = this.LatlyList
				}
				
				if(this.ComputerPrincipleList.length > 4){
					let length = this.ComputerPrincipleList.length
					this.swiper.list[1].firstList = this.ComputerPrincipleList.slice(0,3)
					this.swiper.list[1].secondList = this.ComputerPrincipleList.slice(3,length)
				} else {
					this.swiper.list[1].firstList = this.ComputerPrincipleList
				}
				
				if(this.DataStructureList.length > 4){
					let length = this.DataStructureList.length
					this.swiper.list[2].firstList = this.DataStructureList.slice(0,3)
					this.swiper.list[2].secondList = this.DataStructureList.slice(3,length)
				} else {
					this.swiper.list[2].firstList = this.DataStructureList
				}
				
				if(this.ComputerNetworkList.length > 4){
					let length = this.ComputerNetworkList.length
					this.swiper.list[3].firstList = this.ComputerNetworkList.slice(0,3)
					this.swiper.list[3].secondList = this.ComputerNetworkList.slice(3,length)
				} else {
					this.swiper.list[3].firstList = this.ComputerNetworkList
				}
				
				if(this.OperatingSystemList.length > 4){
					let length = this.OperatingSystemList.length
					this.swiper.list[4].firstList = this.OperatingSystemList.slice(0,3)
					this.swiper.list[4].secondList = this.OperatingSystemList.slice(3,length)
				} else {
					this.swiper.list[4].firstList = this.OperatingSystemList
				}
			},
			goToHistory(item){
				uni.navigateTo({
					url: '../../AiPage/AiHistorys/index?historyType=' + item.historyType + '&historyId=' + item.historyId
				})
			},
			// 点击头像登录
			goToLogin1(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 点击按钮跳转登录
			goToLogin2(){
				this.clicked = true
				
				setTimeout(()=>{
					this.clicked = false
					uni.navigateTo({
						url: '/pages/login/login'
					})
				},500)
			},
			switchCard(e){
				this.swiper.index = e.detail.current
			},
			logout(){
				// 显示加载框
				uni.showLoading({ title: '退出登录中...' });
				setTimeout(() => {
					uni.hideLoading()
					// 显示登录成功的提示
					uni.showToast({
						title: '登出成功',
						icon: 'success',
						duration: 2000 // 显示时长
					});
					
					// 移除 'currentUser' 数据项
					uni.removeStorageSync('currentUser');
					let currentUser = {
						uuid: '',
						avatarUrl: 'https://gd-hbimg.huaban.com/010231a46192438576a025cc43faf1c484517d6f9112-Xu8UrF_fw480webp', // 替换为默认头像路径
						userName: '未登录用户'
					}
					this.currentUser = currentUser
					this.hasCurrentUser = false
				}, 1000)
			},
		}
	}
</script>
<style>
	page{
		background-image: url('https://gd-hbimg.huaban.com/68bb9dee1eed7f34673120d61b18a29d88adcb83713c9-hDYMPo_fw480webp');
		background-size: 100% 100%;
	}
</style> 
<style lang="less" scoped>
	.main {
		.container{
			width: 89%;
			height: 1161rpx;
			background-color: #97a5a966;
			border-radius: 30px;
			margin: auto;
			margin-top: 105rpx;
			position: relative;
			box-sizing: border-box;
			padding-top: 70rpx;
			color: #fff;
			
			.user-actions {
				z-index: 999;
				position: absolute;
				top: -104rpx;
				right: -10rpx;
				display: flex;
				align-items: center;
				color: #fff;
				margin-left: auto;
				.arrow {
					margin-top: 7px;
					image{
						width: 40upx;
						height: 40upx;
					}
				}
				.action-link {
					margin-right: 5px;
					text-decoration: underline;
				}					
			}
			
				
			.info{
				width: 100%;
				height: 200rpx;
				position: absolute;
				top: -81rpx;
				left: 0rpx;
				text-align: center;
				.avatar{
					margin: auto;
				    width: 160rpx;
				    height: 160rpx;
				    border-radius: 50%;
				    background-color: #b1bfc2fc;
					padding: 10rpx;
					box-sizing: border-box;
					image{
						width: 99%;
						height: 99%;
						border-radius: 50%;
					}
				}
				.BigTitle{
					width: 100%;
					height: 80rpx;
					margin-top: 10rpx;
					font-size: 18px;
				}
			}
			
			.cardsBox{
				margin-top: 80rpx;
				width: 100%;
				height: 750rpx;
				
				.initBox{
					width: 100%;
					height: 100%;
					.initImage{
						width: 100%;
						height: 75%;
						margin: auto;
						margin-top: -55rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.initText{
						height: 100rpx;
						text-align: center;
					}
				}
				
				
				.cardTitle{
					width: 100%;
					height: 64rpx;
					text-align: center;
					font-size: 18px;
					margin-bottom: 10rpx;
					line-height: 82rpx;
				}
				
				.cardsSwiper{
					height: 800rpx;
					
					.swiperItem{
						height: 100%;
						border-radius: 20px;
						color: black;
						.card{
							height: 100%;
							transform: scale(1);
							padding: 25rpx;
							background-color: #97a5a966;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							transform: scale(0.7);
							transition: transform 0.4s ease-in-out 0s;
							border-radius: 20px;
							image{
								width: 100%;
								height: 100%;
								border-radius: 20px;
							}
							
							.AIChat_Record_Line2,.AIChat_Record_Line1{
								white-space: nowrap;
								height: 49%;
								border-bottom: 19rpx solid rgba(53, 79, 96, 1);
								box-sizing: border-box;
								border-radius: 10px;
								.chatBox {
									width: 202rpx;
									max-width: 202rpx;
									margin: 10rpx 30rpx;
									padding: 10rpx 20rpx;
									padding-bottom: 50rpx;
									background-color: #dcebefeb;
									display: inline-block;
									border-radius: 10px;
									box-sizing: border-box;
									line-height: 27rpx;
									margin-top: 60rpx;
									height: 78%;
									box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
												0 0 0 rgba(255, 255, 255, 0.8),/* 这两层是很淡很淡的阴影色，几乎啥也没有，就相当于没有立体感成平面面图了 */
												inset 3px 3px 3px rgba(0, 0, 0, 0.2), /* 这里既然是内阴影了，x肯定就以左边框为起点，y以上边框为起点，向右向下为正值 */
												inset -3px -3px 20px rgba(0, 0, 0, 0.2);
												/* inset是指定为内阴影，不设置的时候系统默认为outset外阴影 */
								
								  .title {
									  position: relative;
									  top: -45rpx;
									  left: -2rpx;
									  text-align: center;
									  color: #fff;
								  }
								
								  .inner {
								    line-height: 30rpx;
								    margin-top: 12rpx;
								    background-color: #ece7d5b8;
								    width: 100%;
								    height: calc(100% - 40rpx); // 减去 padding 和 title 的高度
								    border-radius: 10px;
								    border: 2px solid #b3cdd5;
								    padding: 20rpx;
								    font-size: 12px;
								    overflow: hidden;
								    white-space: pre-wrap;
								    box-sizing: border-box;
									box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2), /* x和y的偏移度正值就是往右和往下，也即右边框和下边框阴影 */
												-6px -6px 12px rgba(0, 0, 0, 0.2); /* x和y的偏移度负值就是往左和往上，也即左边框和上边框阴影 */
												/* 另外，一个角全白，对立的一个角淡黑色就是立体效果了 */
								  }
								}
							}
						}
						.card_active{
							height: 100%;
							transform: scale(1);
							padding: 25rpx;
							background-color: #97a5a966;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							image{
								width: 100%;
								height: 100%;
								border-radius: 20px;
							}
							
							.AIChat_Record_Line2,.AIChat_Record_Line1{
								white-space: nowrap;
								height: 49%;
								border-bottom: 19rpx solid rgba(53, 79, 96, 1);
								box-sizing: border-box;
								border-radius: 10px;
								.chatBox {
								    width: 202rpx;
									max-width: 202rpx;
									margin: 10rpx 30rpx;
									padding: 10rpx 20rpx;
									padding-bottom: 50rpx;
									background-color: #dcebefeb;
									display: inline-block;
									border-radius: 10px;
									box-sizing: border-box;
									line-height: 27rpx;
									margin-top: 60rpx;
									height: 78%;
									box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
												0 0 0 rgba(255, 255, 255, 0.8),/* 这两层是很淡很淡的阴影色，几乎啥也没有，就相当于没有立体感成平面面图了 */
												inset 3px 3px 3px rgba(0, 0, 0, 0.2), /* 这里既然是内阴影了，x肯定就以左边框为起点，y以上边框为起点，向右向下为正值 */
												inset -3px -3px 20px rgba(0, 0, 0, 0.2);
												/* inset是指定为内阴影，不设置的时候系统默认为outset外阴影 */
								
								  .title {
									position: relative;
								    top: -45rpx;
								    left: -2rpx;
								    text-align: center;
								    color: #fff;
								  }
								
								  .inner {
								    line-height: 30rpx;
								    margin-top: 12rpx;
								    background-color: #ece7d5b8;
								    width: 100%;
								    height: calc(100% - 40rpx); // 减去 padding 和 title 的高度
								    border-radius: 10px;
								    border: 2px solid #b3cdd5;
								    padding: 20rpx;
								    font-size: 12px;
								    overflow: hidden;
								    white-space: pre-wrap;
								    box-sizing: border-box;
									box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2), /* x和y的偏移度正值就是往右和往下，也即右边框和下边框阴影 */
												-6px -6px 12px rgba(0, 0, 0, 0.2); /* x和y的偏移度负值就是往左和往上，也即左边框和上边框阴影 */
												/* 另外，一个角全白，对立的一个角淡黑色就是立体效果了 */
								  }
								}
							}
						}
					}
				}
			}
			
			.OpenAiChat{
				z-index: 999;
				width: 330rpx;
				height: 100rpx;
				text-shadow: 5px 5px 10px #000000;
				/* margin: auto; */
				background-color: #464e4fde;
				border-radius: 50px;
				/* margin-top: 90rpx; */
				padding: 20rpx;
				font-size: 22px;
				text-align: center;
				line-height: 34px;
				position: absolute;
				bottom: 124rpx;
				left: 172rpx;
				box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -3px -3px 12px rgba(0, 0, 0, 0.2);
				transition: 500ms;
			}
			.OpenAiChat_clicked{
				box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
							0 0 0 rgba(255, 255, 255, 0.8),/* 这两层是很淡很淡的阴影色，几乎啥也没有，就相当于没有立体感成平面面图了 */
							inset 3px 3px 3px rgba(0, 0, 0, 0.2), /* 这里既然是内阴影了，x肯定就以左边框为起点，y以上边框为起点，向右向下为正值 */
							inset -3px -3px 20px rgba(0, 0, 0, 0.2);
							/* inset是指定为内阴影，不设置的时候系统默认为outset外阴影 */
			}
			.button{
				margin: auto;
			    width: 60%;
			    height: 75rpx;
			    border-radius: 30px;
			    text-align: center;
			    font-size: 17px;
			    line-height: -14rpx;
			    background-color: #093948;
			    margin-top: 147rpx;
			    box-sizing: border-box;
			    align-items: center;
			    color: #fff;
			    justify-content: center;
			    display: flex;
				image{
					margin-left: 20rpx;
					margin-top: 2rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>